<template>
	<view>
		<view id="box">
			<h2>音乐搜索器</h2>
			<text>多站合一音乐搜索解决方案</text>
			<!-- 音乐组件 -->
			<view class="MusicBox">
				<view>
					<view class="MusicComp">
						<input   class="MusicValue" v-model="SearchMusicName" confirm-type="search" placeholder="搜索的音乐名称" />
						<button @click="GetMusicData" class="SearchBtn" type="primary" plain="true">搜索</button>
					</view>
					<ul class="MusicList">
						<li @click="PlayMusic(item.MusicId)" class="MusicListIO" v-for="(item, index) in MusicList" :key="index">
							<view style="display: flex;">
								<span>{{index+=1}}</span>
								<span class="MusicTitle">{{item.MusicName}}</span>
							</view>
							<span class="MusicTitle" >{{MusicAthor = item.MusicAthor}}</span>
						</li>
					</ul>
				</view>
			</view>
			<!-- 底部播放器 -->
			<view class="Play_Footer_Box">
<!-- 				<view class="MusicInfo">
					<image :src="MusicImg" mode="" class="MusicImg"></image>
					<text class="MusicTitle">{{MusicName}}</text>
					<view class="PlayMusicBox">
						<text v-if="PlayFomt" class="iconfont icon-bofang  playfo" @click="PlayIsShow"></text>
						<text v-else class="iconfont icon-weibiaoti-- playfo" @click="PlayIsShow"></text>
					</view>
				</view> -->
				<audio
				id="y"
				:src="MusicInfo.MusicSrc"
				controls
				:poster="MusicInfo.MusicPic"
				:name="MusicInfo.MusicName"
				:author="MusicInfo.MusicAthor"
				></audio>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PlayFomt:true,
				Domain: "http://localhost:50000",
				MusicList: [],
				SearchMusicName:"",
				MusicInfo: {
					MusicName:"音乐名称",
					MusicAthor:"音乐歌手",
					MusicPic:"音乐封面",
					MusicSrc:"音乐地址"
				},
			};
		},
		methods: {
			// 点击播放
			
			// 当音乐播放即将结束后自动获取下一首
			MusicEnd() {
				console.log("即将播放下一首");
			},
			// 切换播放
			PlayIsShow () {
				this.PlayFomt = !this.PlayFomt
			},
			// 获取歌曲MP3
			PlayMusic(MusicId) {
				// 根据 id 在数组获取匹配项目
				const TMusicInfo = this.MusicList.filter(item => item.MusicId == MusicId);
				
				uni.request({
					url: this.Domain + "/yymusic/api/mp3/",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: {
						"MusicId": MusicId
					},
					method: "POST",
					dataType: "json",
					success: res => {
						console.log("服务器返回数据: ",res.data);
						this.MusicInfo.MusicName = TMusicInfo[0].MusicName;
						this.MusicInfo.MusicAthor = TMusicInfo[0].MusicAthor;
						this.MusicInfo.MusicPic = res.data.pic;
						this.MusicInfo.MusicSrc = res.data.url;
					},
					fail(error) {
						console.log(error);
					},
					complete() {
						console.log("请求完成");
					}
				})
			},
			// 请求歌曲
			GetMusicData(){
				return uni.request({
					url: this.Domain + "/yymusic/api/search/",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: {
						"MusicName": this.SearchMusicName
					},
					method: "POST",
					dataType: "json",
					success: res => {
						this.MusicList = res.data.MusicList;
						console.log(res);
					},
					fail(error) {
						console.log(error);
					},
					complete() {
						console.log("请求完成");
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	#box {
		width: 100%;
		background-color: #eee;
		padding: 30px 0;
		text-align: center;
		position: relative;

		.MusicBox {
			padding: 20px;
			margin-bottom: 30px;

			// 音乐列表
			.MusicList {
				padding: 0;
				background-color: #1e90ff;
				margin-top: 1px;

				.MusicListIO {
					height: 40px;
					line-height: 40px;
					padding: 0 10px;
					display: flex;
					justify-content: space-between;
					background-color: #4876ff;
					color: white;
					border-bottom: 3px solid #00bfff;

					.MusicTitle {
						margin-left: 20px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						display: block;
						width: 200px;
					}
				}
			}

			.MusicComp {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.SearchBtn {
					flex: 1;
					margin-left: 10px;
					height: 40px;
					line-height: 40px;
				}

				.MusicValue {
					flex: 5;
					height: 40px;
					padding: 0 10px;
					box-sizing: border-box;
					text-align: left;
					border: 1px solid #1e90ff;
				}
			}
		}

		.Play_Footer_Box {
			position: fixed;
			bottom: 0;
			width: 100%;
			// background-color: #a020f0;
			.Musicaudio {
				width: 100%;
				// background-color: #17af09;
				border:none;
				display: block;
			}
			.MusicInfo {
				height: 50px;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.MusicImg {
					height: 50px;
					width: 50px;
					border-radius: 50%;
				}
				.PlayMusicBox {
					height:50px;
					width:50px;
					border-radius: 30px;
					text-align: center;
					line-height:50px;
				}
				.playfo {
					font-size: 40px;
				}
			}
		}
	}
</style>